<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

import prompticon from "~icons/garden/alert-warning-fill-12";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    higherDeptOptions: [],
    higherPositionOptions: [],
    higherRoleOptions: [],
    department_belong: null,
    position: null,
    role: null,
    nickname: "",
    account: "",
    password: "",
    phone: "",
    status: "1",
    is_root: 0
  })
});

const statusOption = [{
  value: "1",
  label: "启用"
}, {
  value: "0",
  label: "停用"
}]

const isRootOption = [{
  value: 0,
  label: "不是超管"
}, {
  value: 1,
  label: "是超管"
}]

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="所属部门" prop="department_belong">
          <el-cascader
            v-model="newFormInline.department_belong"
            class="w-full"
            :options="newFormInline.higherDeptOptions"
            :props="{
              value: 'id',
              label: 'name',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            filterable
            placeholder="请选择归属部门"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="职位:" prop="position">
          <el-select
            v-model="newFormInline.position"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in newFormInline.higherPositionOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="角色:" prop="role">
          <el-select
            v-model="newFormInline.role"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in newFormInline.higherRoleOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="newFormInline.nickname"
            clearable
            placeholder="请输入用户昵称"
          />
          <div class="tip">
            <IconifyIconOffline :icon="prompticon" style="color: #999999;width: 20px;height: 20px;"/>
            <p>提示：昵称尽量用真名，便于区分，如李华</p>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="用户名" prop="account">
          <el-input
            v-model="newFormInline.account"
            clearable
            placeholder="请输入用户名称"
          />
          <div class="tip">
            <IconifyIconOffline :icon="prompticon" style="color: #999999;width: 20px;height: 20px;"/>
            <p>提示：用户名请使用英文拼音，便于登录，如 lihua</p>
          </div>
        </el-form-item>
      </re-col>
      <re-col v-if="!newFormInline.id" :value="24" :xs="24" :sm="24">
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="newFormInline.password"
            clearable
            placeholder="请输入用户密码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            placeholder="请输入手机号"
          />
        </el-form-item>
      </re-col>
      <!-- <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="newFormInline.email"
            clearable
            placeholder="请输入邮箱"
          />
        </el-form-item>
      </re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="启用状态:" prop="status">
          <el-radio-group v-model="newFormInline.status">
            <el-radio v-for="(item, index) in statusOption" :key="index" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="是否超管:" prop="is_root">
          <el-radio-group v-model="newFormInline.is_root">
            <el-radio v-for="(item, index) in isRootOption" :key="index" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.tip {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  padding: 3px 6px;
  line-height: 21px;
  margin-top: 6px;

  p{
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
    font-weight: bold;
  }
}
</style>